Ant Design Vue V3版本填坑记录

最近使用 Vite + Vue3 组合式 API 开发项目时，采用 Ant Design Vue V3 版本，在配置 table 数据时，发现 API 及用法变化很大。 首先是废除了 column 配置中的 scopedSlots 与 slots 属性。但是在使用时页面虽然可以正常渲染，打开控制台却有如下报错信息： 查了相关资料，是由于 and3 table 即将废除 slots 写法，所以在最新的 V2 版本中也不再推荐使用。

官方版本提示：2.x 版本是为了兼容 Vue 3 开发的兼容版本，他并没有带来很多新的特性，大多数的 API 改变也只是为了更好的兼容 Vue 3。 3.x 版本在性能、易用性、功能上都有了很大的提升，3.x 版本稳定后，我们会归档 2.x 版本，建议您尽快升级 3.x 版本。虽然有很多改动，但基本都做了兼容，你可以按照控制台给出的警告逐步升级。

脚本：

模板：

需要注意的是，此写法确实是官方的写法，如下： 不过官方在大版本更新处还是给出了如下的提示，算是提前的版本切换了

利用 bodyCell、headerCell 个性化单元格（table属性）

模板

脚本

这里不再使用 column.slots 配置支持 slot 的属性 如上，通过 v-if 判断对应列应该显示的内容，否则全部列都会展示数据。

你在使用的过程中，碰到哪些需要填的坑，或者有什么好的解决办法呢？

column.customRender 用于生成复杂数据的渲染函数，V3 版本也对齐做了升级，用法有所不同。 有如下数据

想要根据性别标识（0，1），展示对应的结果（男，女）：

上面的方式放到 Vite+Vue3+Ant V3 版本上，则不兼容，页面和控制台报错如下：

Tip：个人看来，V3 版本的写法更加适合个人的开发习惯，也更加简洁。

a-table 是开发中经常用到的组件，对于 V3 版本做了一些升级和修正，不熟悉的同学可以参考这篇文章的代码，搞定常用的 table attribute。

V3版本官方升级提醒：Table 废弃了 column.slots, 新增 v-slot:bodyCell、v-slot:headerCell，自定义单元格，新增 column.customFilterDropdown v-slot:customFilterDropdown，自定义筛选菜单，新增了 v-slot:customFilterIcon 自定义筛选按钮，但 column.slots 还可用（实际测试2.X版本也会出现控制台警告，上一篇文章已经说过），我们会在下一个大版本时移除。

数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城 个人博客地址

参数 说明 类型 默认值 版本 bodyCell 个性化单元格 v-slot:bodyCell="{text, record, index, column}" - 3.0 bordered 是否展示外边框和列边框 boolean false childrenColumnName 指定树形结构的列名 string children columns 表格列的配置描述，具体项见下表 array - components 覆盖默认的 table 元素 object - customFilterDropdown 自定义筛选菜单，需要配合 column.customFilterDropdown 使用 v-slot:customFilterDropdown="FilterDropdownProps" - 3.0 customFilterIcon 自定义筛选图标 v-slot:customFilterIcon="{filtered, column}" - 3.0 customHeaderRow 设置头部行属性 Function(columns, index) - customRow 设置行属性 Function(record, index) - dataSource 数据数组 object[] defaultExpandAllRows 初始时，是否展开所有行 boolean false defaultExpandedRowKeys 默认展开的行 string[] - emptyText 自定义空数据时的显示内容 v-slot:emptyText - 3.0 expandedRowKeys(v-model) 展开的行，控制属性 string[] - expandedRowRender 额外的展开行 Function(record, index, indent, expanded):VNode | v-slot:expandedRowRender="{record, index, indent, expanded}" - expandFixed 控制展开图标是否固定，可选 true left right boolean | string false 3.0 expandIcon 自定义展开图标 Function(props):VNode | v-slot:expandIcon="props" - expandRowByClick 通过点击行来展开子行 boolean false footer 表格尾部 Function(currentPageData)|v-slot:footer="currentPageData" getPopupContainer 设置表格内各类浮层的渲染节点，如筛选菜单 (triggerNode) => HTMLElement () => TableHtmlElement 1.5.0 headerCell 个性化头部单元格 v-slot:headerCell="{title, column}" - 3.0 indentSize 展示树形数据时，每层缩进的宽度，以 px 为单位 number 15 loading 页面是否加载中 boolean|object false locale 默认文案设置，目前包括排序、过滤、空数据文案 object filterConfirm: 确定 filterReset: 重置 emptyText: 暂无数据 pagination 分页器，参考配置项或 pagination文档，设为 false 时不展示和进行分页 object rowClassName 表格行的类名 Function(record, index):string - rowExpandable 设置是否允许行展开 (record) => boolean - 3.0 rowKey 表格行 key 的取值，可以是字符串或一个函数 string|Function(record):string 'key' rowSelection 列表项是否可选择，配置项 object null scroll 表格是否可滚动，也可以指定滚动区域的宽、高，配置项 object - showExpandColumn 设置是否展示行展开列 boolean true 3.0 showHeader 是否显示表头 boolean true showSorterTooltip 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 boolean | Tooltip props true 3.0 size 表格大小 default | middle | small default sortDirections 支持的排序方式，取值为 ascend descend Array [ascend, descend] sticky 设置粘性头部和滚动条 boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement} - 3.0 summary 总结栏 v-slot:summary - 3.0 tableLayout 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局 - | 'auto' | 'fixed' 无 固定表头/列或使用了 column.ellipsis 时，默认值为 fixed 1.5.0 title 表格标题 Function(currentPageData)|v-slot:title="currentPageData" transformCellText 数据渲染前可以再次改变，一般用于空数据的默认配置，可以通过 ConfigProvider 全局统一配置 Function({ text, column, record, index }) => any，此处的 text 是经过其它定义单元格 api 处理后的数据，有可能是 VNode | string | number 类型 - 1.5.4

事件名称 说明 回调参数 change 分页、排序、筛选变化时触发 Function(pagination, filters, sorter, { currentDataSource }) expand 点击展开图标时触发 Function(expanded, record) expandedRowsChange 展开的行变化时触发 Function(expandedRows) resizeColumn 拖动列时触发 Function(width, column)

参数 说明 类型 默认值 版本 align 设置列的对齐方式 left | right | center left colSpan 表头列合并,设置为 0 时，不渲染 number customCell 设置单元格属性 Function(record, rowIndex, column) - column add from 3.0 customFilterDropdown 启用 v-slot:customFilterDropdown，优先级低于 filterDropdown boolean false 3.0 customHeaderCell 设置头部单元格属性 Function(column) - customRender 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引 Function({text, record, index, column}) {} - dataIndex 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 string | string[] - defaultFilteredValue 默认筛选值 string[] - 1.5.0 defaultSortOrder 默认排序顺序 ascend | descend - ellipsis 超过宽度将自动省略，暂不支持和排序筛选一起使用。 设置为 true 或 { showTitle?: boolean } 时，表格布局将变成 tableLayout="fixed"。 boolean | { showTitle?: boolean } false 3.0 filterDropdown 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 VNode - filterDropdownVisible 用于控制自定义筛选菜单是否可见 boolean - filtered 标识数据是否经过过滤，筛选图标会高亮 boolean false filteredValue 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 string[] - filterIcon 自定义 filter 图标。 VNode | ({filtered: boolean, column: Column}) => vNode false filterMode 指定筛选菜单的用户界面 'menu' | 'tree' 'menu' 3.0 filterMultiple 是否多选 boolean true filters 表头的筛选菜单项 object[] - filterSearch 筛选菜单项是否可搜索 Boolean false 3.0 fixed 列是否固定，可选 true(等效于 left) 'left' 'right' boolean|string false key Vue 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性 string - maxWidth 拖动列最大宽度，会受到表格自动调整分配宽度影响 number - 3.0 minWidth 拖动列最小宽度，会受到表格自动调整分配宽度影响 number 50 3.0 resizable 是否可拖动调整宽度，此时 width 必须是 number 类型 boolean - 3.0 responsive 响应式 breakpoint 配置列表。未设置则始终可见。 Breakpoint[] - 3.0 showSorterTooltip 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 showSorterTooltip boolean | Tooltip props true sortDirections 支持的排序方式，取值为 'ascend' 'descend' Array ['ascend', 'descend'] 1.5.0 sorter 排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true Function|boolean - sortOrder 排序的受控属性，外界可用此控制列的排序，可设置为 'ascend' 'descend' false boolean|string - title 列头显示文字 string - width 列宽度 string|number - onFilter 本地模式下，确定筛选的运行函数, 使用 template 或 jsx 时作为filter事件使用 Function - onFilterDropdownVisibleChange 自定义筛选菜单可见变化时调用，使用 template 或 jsx 时作为filterDropdownVisibleChange事件使用 function(visible) {} -

参数 说明 类型 默认值 版本 checkStrictly checkable 状态下节点选择完全受控（父子数据选中状态不再关联） boolean true 3.0 columnTitle 自定义列表选择框标题 string|VNode - columnWidth 自定义列表选择框宽度 string|number - fixed 把选择框列固定在左边 boolean - getCheckboxProps 选择框的默认属性配置 Function(record) - hideDefaultSelections 去掉『全选』『反选』两个默认选项 boolean false hideSelectAll 隐藏全选勾选框与自定义选择项 boolean false 3.0 preserveSelectedRowKeys 当数据被删除时仍然保留选项的 key boolean - 3.0 selectedRowKeys 指定选中项的 key 数组，需要和 onChange 进行配合 string[] [] selections 自定义选择项 配置项, 设为 true 时使用默认选择项 object[] | boolean true type 多选/单选，checkbox or radio string checkbox onChange 选中项发生变化时的回调 Function(selectedRowKeys, selectedRows) - onSelect 用户手动选择/取消选择某列的回调 Function(record, selected, selectedRows, nativeEvent) - onSelectAll 用户手动选择/取消选择所有列的回调 Function(selected, selectedRows, changeRows) - onSelectInvert 用户手动选择反选的回调 Function(selectedRows) - onSelectNone 用户清空选择的回调 function() - 3.0

参数 说明 类型 默认值 scrollToFirstRowOnChange 当分页、排序、筛选变化后是否滚动到表格顶部 boolean - x 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 'max-content' string | number | true - y 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 string | number -